/*
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
 */
/*
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
 */
import { categoryGet, categoryPost, companyGet, companyPut } from "@/api/pro";
import { roleGet, userReg } from "@/api/user";
import ImgUpload from "@/components/img-upload";
import { CompanyType } from "@/types/pro";
import { RoleType } from "@/types/user";
import { Button, Form, Input, Select, Switch, message } from "antd";
import React, { useEffect, useState } from "react";

const { Option } = Select;

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};
interface UserFormType {
  classify: string;
  companyId?: string;
  roleId: string;
  username?: string;
  password?: string;
}
const UserManager: React.FC = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState<Array<CompanyType>>([]);
  const [roleList, setRoleList] = useState<Array<RoleType>>([]);
  useEffect(() => {
    //加载企业
    companyGet().then((res) => {
      setData(res.data.results);
    });
    // 加载角色
    roleGet().then((res) => {
      setRoleList(res.data.results);
    });
  }, []);
  const onFinish = (values: UserFormType) => {
    console.log(values);
    if (values.classify === "2") {
      let { username, password, roleId } = values;
      userReg({ username: username!, password: password!, type: 2, roleId });
    } else {
      message.error("LeanCloud接口不支持跨账号更新操作");
    }
  };

  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({ note: "Hello world!", gender: "male" });
  };

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item name="classify" label="账号类型" rules={[{ required: true }]}>
        <Select>
          <Option value="1">企业</Option>
          <Option value="2">运营</Option>
        </Select>
      </Form.Item>

      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) =>
          prevValues.classify !== currentValues.classify
        }
      >
        {({ getFieldValue }) =>
          getFieldValue("classify") === "2" ? (
            <>
              <Form.Item
                name="username"
                label="账号名称"
                rules={[{ required: true }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                name="password"
                label="默认密码"
                rules={[{ required: true }]}
              >
                <Input />
              </Form.Item>
            </>
          ) : (
            <Form.Item
              name="companyId"
              label="企业列表"
              rules={[{ required: true }]}
            >
              <Select placeholder="请选择企业" allowClear>
                {data.map((item, index) => {
                  return (
                    <Option value={item.objectId} key={index}>
                      {item.name}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          )
        }
      </Form.Item>
      <Form.Item name="roleId" label="关联角色" rules={[{ required: true }]}>
        <Select placeholder="请选择角色" allowClear>
          {roleList.map((item, index) => {
            return (
              <Option value={item.objectId} key={index}>
                {item.roleName}
              </Option>
            );
          })}
        </Select>
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
        <Button htmlType="button" onClick={onReset}>
          重置
        </Button>
        <Button type="link" htmlType="button" onClick={onFill}>
          Fill form
        </Button>
      </Form.Item>
    </Form>
  );
};

export default UserManager;
